<template>
    <el-select class="g-width100"
               ref="elSelect"
               filterable
               remote
               clearable
               :disabled="disabled"
               :readonly="readonly"
                v-model="localValue"
               :placeholder="placeholder"
               :remote-method="getData"
               :loading="loading"
            v-on:focus="handleFocus($event)"
            v-on:blur="handleBlur($event)"
            v-on:change="emitChange"
            v-on:input="emitInput"
    >
        <el-option
                v-for="(item) in data"
                :label="$_object_getValue(item,optionProp.label,item)"
                :disabled="item.isDisabled"
                :value="$_object_getValue(item,optionProp.value,item)"
                :key="$_object_getValue(item,optionProp.value,item)"
                ></el-option>
    </el-select>
</template>

<script>
    import objectMixin from "../../mixin/ObjectMixin"
    export default {
        name: 'SelectRemote',
        mixins:[objectMixin],
        props: {
            value: {
                required: true
            },
            // 初始显示的label值
            label:{
                type: String
            },
            placeholder:{
                type: String,
                default: '请输入关键字'
            },
            // 数据地址
            url: {
                type: String,
                required: true
            },
            // 是否禁用
            disabled:{
                type:Boolean,
                default:false
            },
            readonly:{
                type:Boolean,
                default:false
            },
            optionProp:{
                type: Object,
                default:function () {
                    return {
                        value: 'id',
                        label: 'name'
                    }
                }
            },
            queryProp:{
                type: String,
                default: 'name'
            }
        },
        data () {
            return {
                localValue: this.value,
                loading: false,
                data: []
            }
        },
        mounted () {
            if(this.label){
                let dataItem = {}
                dataItem[this.optionProp.value] = this.value
                dataItem[this.optionProp.label] = this.label
                this.data.push(dataItem)
            }
        },
        methods: {
            handleFocus (event) {
                this.$emit('focus', event)
            },
            handleBlur (event) {
                this.$emit('blur', event)
            },
            emitChange (val) {
                this.$emit('change', val)
            },
            emitInput (val) {
                this.$emit('input', val)
            },
            // 加载
            getData (query) {
                if(!query){
                    return
                }
                this.loading = true
                let data = {}
                data[this.queryProp] = query
                this.axios.get(this.url,{
                    params:data
                }).then(res => {
                    if(res.data.records !== undefined){
                        this.data = res.data.records
                    }else{
                        this.data = res.data
                    }
                }).catch((error)=>{
                    this.data = []
                    if(error.response){
                        if(error.response.status == 401){
                            return
                        }
                        if(error.response.status != 404){
                            this.$message.error(error.response.data.msg)
                        }
                    }else{

                        this.$message.error('网络错误或服务不可用')
                    }

                }).finally(()=>{
                    this.loading = false
                })
            }
        },
        watch: {
            value(val){
                this.localValue = val
            },
            label(val){
                if(val){
                    let dataItem = {}
                    dataItem[this.optionProp.value] = this.value
                    dataItem[this.optionProp.label] = val
                    this.data.push(dataItem)
                }
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
